<template>
	<view class="content font_family">
		<view class="title">
			{{type=="j"?'寄件信息':'收件信息'}}
		</view>
		<view class="item f_j">
			<view class="left">
				<text class="color">*</text>
				<text>{{type=="j"?'寄件人':'收件人'}}</text>
			</view>
			<view class="right">
				<u--input :placeholderStyle='{color:"#999999"}' placeholder="请输入姓名" border="none"
					v-model="msg.name"></u--input>
			</view>
		</view>
		<view class="item f_j">
			<view class="left">
				<text class="color">*</text>
				<text>手机号</text>
			</view>
			<view class="right">
				<u--input :placeholderStyle='{color:"#999999"}' placeholder="请输入手机号" border="none"
					v-model="msg.tel"></u--input>
			</view>
		</view>
		<view class="item f_j">
			<view class="left">
				<text class="color">*</text>
				<text>所在地区</text>
			</view>
			<view class="right f_z_b f_j" @click="choose">
				<view class="text">
					{{msg.address?msg.address:'请选择地址'}}
				</view>
				<image src="../../static/public/go_h.png" mode=""></image>
			</view>
		</view>
		<view class="item f_j">
			<view class="left">
				<text class="color">*</text>
				<text>详细地址</text>
			</view>
			<view class="right f_z_b f_j">
				<u--textarea :placeholderStyle='{color:"#999999"}' v-model="msg.xx_address" height='70rpx' border='none'
					placeholder="请输入内容"></u--textarea>
			</view>
		</view>
		<view class="btn" @click="sub">
			确认
		</view>
	</view>
</template>

<script>
	import { mapMutations } from 'vuex'
	export default {
		data() {
			return {
				type: '',
				msg: {
					name: '',
					tel: '',
					address: '',
					xx_address: ''
				}
			}
		},
		onLoad(e) {
			this.type = e.type
		},
		methods: {
			...mapMutations(['set_j_msg', 'set_s_msg']),
			choose() {
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						this.msg.address = res.address
					},
					fail: (res) => {
						console.log(res)
					}
				})
			},
			sub() {
				if (!this.msg.name) {
					uni.showToast({
						icon: 'none',
						title: '请输入姓名',
					})
					return
				}
				if (!this.msg.tel) {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号',
					})
					return
				}
				if (!this.msg.address) {
					uni.showToast({
						icon: 'none',
						title: '请选择地址',
					})
					return
				}
				if (!this.msg.xx_address) {
					uni.showToast({
						icon: 'none',
						title: '请输入详细地址',
					})
					return
				}
				if (this.type == 'j') {
					this.set_j_msg(this.msg)
				} else {
					this.set_s_msg(this.msg)
				}
				this.back()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;
		background-color: #FFFFFF;

		.title {
			font-weight: 400;
			font-size: 33rpx;
			color: #232323;
		}

		.item {
			margin-top: 30rpx;

			.left {
				width: 200rpx;

				.color {
					color: #FA3B3A;
				}
			}

			.right {
				flex: 1;
				padding: 30rpx;
				// width: 537rpx;
				background: #F9F9F9;
				border-radius: 18rpx 18rpx 18rpx 18rpx;

				.text {
					flex: 1;
					color: #000000;
				}

				image {
					width: 30rpx;
					height: 30rpx;
				}

				::v-deep .u-textarea {
					padding: 0rpx;
					background: none;
				}
			}
		}

		.btn {
			margin-top: 300rpx;
			text-align: center;
			padding: 25rpx 0rpx;
			background: #EE4133;
			border-radius: 47rpx 47rpx 47rpx 47rpx;
			font-weight: 600;
			font-size: 30rpx;
			color: #FFFFFF;
		}
	}
</style>